<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font2/iconfont.css">
    <link rel="stylesheet" href="../css/goods.css">
    <link rel="stylesheet" href="../css/com.css">
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <!-- 11111 -->
    <!-- 头部公共部分 -->
    <div class="s-header">
        <div class="header-wrap">
            <div class="header-l">
                <ul class="nav-l">
                    <li class="nl-li"><a href="">帮助中心</a></li>
                    <li class="nl-li"><a href="">收藏</a></li>
                    <li class="nl-li"><a href="">360官网</a></li>
                    <li class="nl-li"><a href="">360智慧生活</a></li>
                </ul>
            </div>
            <div class="header-r">
                <div class="nav-r">
                    <div class="tips nr-li">
                        <a href="./login.html">登录</a>
                        <a href="./reg.html">注册</a>
                    </div>
                    <div class="nr-li"><a href="./shoppingcar.html"><span class="iconfont icon-shangpin"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navwrap">
        <div class="navwrapper">
            <div class="navsearch-l">
                <div class="navlist"><img class="logo" src="../images/logo.png" alt=""><a href="javascript:;">新品推荐</a><a
                        href="javascript:;">热卖榜单</a></div>
            </div>
            <div class="navsearch-r">
                <div class="searchBar"><input class="search-input" type="text" placeholder="请输入关键词"><span
                        class="iconfont icon-sousuo"></span></div>
                <div class="searchlist"><a href="">记录仪</a><a href="">摄像机</a><a href="">路由器</a><a href="">耳机</a><a
                        href="">扫地机</a><a href="">智能手表</a></div>
            </div>
        </div>
    </div>

    <!-- 内容部分 -->
    <div class="mainWrapper">
        <div class="s-wrap">
            <div class="searchBoss">
                <div class="searchBox">
                    <div class="searchNav">
                        <span class="default_path">
                            <a href="">首页</a><span>&ensp;>&ensp;</span><a href="">全部搜索结果</a>
                        </span>
                        <div class="breadcrumbs_box"></div>
                        <span class="sw_box"></span>
                    </div>
                </div>
                <div class="filterBox">
                    <div class="classify">
                        <span class="hint">分类：</span>
                        <div class="option_box"><a href="">汽车</a><a href="">手机数码/电动办公</a></div>
                    </div>
                    <div class="translate">
                        <span class="hint">品牌：</span>
                        <div class="option_box"><a href="">360</a></div>
                    </div>
                    <div class="opt">
                        <span class="hint">排序：</span>
                        <div class="orderColBox">
                            <label>
                                默认
                                <input type="radio" checked="" name="orderCol" class="orderCol" value="id">
                            </label>
                            <label>
                                价格
                                <input type="radio" name="orderCol" class="orderCol" value="goodsPrice">
                            </label>
                        </div>
                        <div class="orderTypeBox">
                            <label>
                                升序
                                <input type="radio" checked="" name="orderType" class="orderType" value="asc">
                            </label>
                            <label>
                                降序
                                <input type="radio" name="orderType" class="orderType" value="desc">
                            </label>
                        </div>
                        <div class="showNumBox">
                            <select class="select">
                                <option value="10" selected="">每页显示10条</option>
                                <option value="20">每页显示20条</option>
                                <option value="40">每页显示40条</option>
                                <option value="60">每页显示60条</option>
                            </select>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="listBox">
            <div class="listBoss">
                <ul class="goodsList">
                    <!-- <li class="list-item">
                        <div class="imgBox"><a href=""><img src="../o.png/a_12.png" alt=""></a></div>
                        <p class="name">360扫地机器人X100-尘盒过滤网</p>
                        <p class="price">￥<span>239</span></p>
                    </li>
                    <li class="list-item">
                        <div class="imgBox"><a href=""><img src="" alt=""></a></div>
                        <p class="name"></p>
                        <p class="price"></p>
                    </li>
                    <li class="list-item">
                        <div class="imgBox"><a href=""><img src="" alt=""></a></div>
                        <p class="name"></p>
                        <p class="price"></p>
                    </li>
                    <li class="list-item">
                        <div class="imgBox"><a href=""><img src="" alt=""></a></div>
                        <p class="name"></p>
                        <p class="price"></p>
                    </li>
                    <li class="list-item">
                        <div class="imgBox"><a href=""><img src="" alt=""></a></div>
                        <p class="name"></p>
                        <p class="price"></p>
                    </li> -->
                </ul>
            </div>
            <div class="pageBox">
                <span class="prev">上一页</span>
                <span class="pageTips">1/20,共478条</span>
                <span class="next">下一页</span>
            </div>
        </div>

    </div>


    <!-- 底部公共部分 -->
    <div class="footerWrap">
        <div class="footer-top">
            <div class="ftWrap">
                <div class="aboutbox">
                    <p class="helpTitle">关于商城</p>
                    <p class="helpText">
                        360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。
                    </p>
                </div>
                <div class="linkbox">
                    <p class="helpTitle">售后服务</p>
                    <a href="">7日无理由退货 </a>
                    <a href="">质量问题15日内换货 </a>
                    <a href="">保修条款 </a>
                    <a href="">服务流程 </a>
                    <a href="">许可协议 </a>
                    <a href="">隐私政策 </a>

                </div>
                <div class="linkbox">
                    <p class="helpTitle">帮助中心</p>
                    <a href="">用户注册 </a>
                    <a href="">会员说明 </a>
                    <a href="">登录与密码找回 </a>
                    <a href="">购买指南 </a>
                    <a href="">支付方式 </a>
                    <a href="">配送与说明 </a>
                </div>
                <div class="contentbox">
                    <p class="helpTitle">联系我们</p>
                    <p class="bigText">400-6822-360</p>
                    <p class="smallText">周一至周日 9:00-18:00（仅收市话费）</p>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="fbWrap">
                <div class="fbtBox">
                    <a href=""><span class="iconfont icon-fanhui"></span> 7天无理由退货 </a>
                    <a href=""><span class="iconfont icon-double-arrows"></span> 15天免费换货 </a>
                    <a href=""><span class="iconfont icon-shangpin1
                        "></span> 满99元包邮 </a>
                </div>
                <div class="fbBbox">
                    <p class="fb-top"> ©2019-2021 mall.360.cn版权所有 </p>
                    <p class="fb-center">京ICP备08010314号-6 营业执照 </p>
                    <div class="fb-bottom">公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N | 食品经营许可证<br>
                        公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360</div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    $(function () {
        var account = getCookie("lgc");
        console.log(account);
        if (account) {
            $(".tips").html(`欢迎您,${account} <button style="font-size: 12px" onclick="exit()">退出</button>`).css({ "color": "#fff", fontSize: "12px" });
        }

        var key = "";
        var orderCol = "id";
        var orderType = "asc";
        var pageIndex = 1;
        var showNum = 10;

        // 关键词搜索
        $(".icon-sousuo").click(function () {
            key = $(this).prev().val();
            console.log(key);
            loadGoods();
        })

        // 默认和价格排序
        $(".orderCol").click(function () {
            orderCol = $(this).val();
            loadGoods();
        })

        // 分页
        $(".select").click(function () {
            showNum = $(this).val();
            loadGoods();
        })

        // 升降序
        $(".orderType").click(function () {
            orderType = $(this).val();
            loadGoods();
        })

        loadGoods();//页面加载
        function loadGoods() {
            goods({ key, orderCol, orderType, showNum, pageIndex }).then(({ status, detail, total, maxPage, list }) => {
                if (status) {
                    var html = "";
                    list.forEach(({ id, goodsId, goodsName, goodsImg, goodsPrice }) => {
                        html += `<li class="list-item">
                            <div class="imgBox"><a href="./goodsDetail.html?gid=${goodsId}"><img src="${goodsImg}" alt=""></a></div>
                            <p class="name">${goodsName}</p>
                            <p class="price">￥<span>${goodsPrice}</span></p>
                        </li>`;
                    });
                    $(".goodsList").html(html);
                    pageIndex = pageIndex > maxPage ? maxPage : pageIndex;
                    $(".pageTips").html(`${pageIndex}/${maxPage},共${total}条`);
                    $(".next").off("click").click(function () {
                        if (pageIndex >= maxPage) return false;
                        pageIndex++;
                        $(".pageTips").html(`${pageIndex}/${maxPage},共${total}条`);
                        loadGoods();
                    });
                    $(".prev").off("click").click(function () {
                        if (pageIndex <= 1) return false;
                        pageIndex--;
                        $(".pageTips").html(`${pageIndex}/${maxPage},共${total}条`);
                        loadGoods();
                    })
                } else {
                    $(".goodsList").html(`<div >暂无商品</div>`);
                }
            }).catch(err => {
                console.log(err);
            }).finally(function () {

            })

        }
    })
</script>

</html>